<template>
  <el-dialog v-model="dialogVisible" title="违禁词" width="500" draggable :before-close="reset">
    <div style="height: 30px">
      <span style="color: red">*</span
      ><strong>前的内容存在违禁词，确定提交吗？如果执意提交这些词将会屏蔽</strong>
    </div>
    <div>
      <div style="width: 400px; display: flex; flex-wrap: wrap">
        <div
          v-for="(forbi, index) of forbidden"
          :key="index"
          style="margin-right: 10px; margin-top: 5px; background: #eee"
        >
          {{ forbi }}
        </div>
      </div>
      <div></div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="reset">取消</el-button>
        <el-button type="primary" @click="confirm"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'

const forbidden = ref([])
const emit = defineEmits(['submit-content'])

const dialogVisible = ref(false)
const open = (item) => {
  dialogVisible.value = true
  forbidden.value = item
}

const confirm = () => {
  emit('submit-content')
  reset()
}

const reset = () => {
  forbidden.value = []
  dialogVisible.value = false
}

defineExpose({
  open
})
</script>

<style scoped></style>
